import $ from './library/jquery.js';
import cookie from './library/cookie.js';

let shop = cookie.get('shop');
// console.log(shop);
if (shop) {
  shop = JSON.parse(shop);

  let idList = shop.map((el) => el.id).join();
  // console.log(idList);
  $.ajax({
    type: 'get',
    url: '../../interface/getItems.php',
    data: { idList: idList },
    dataType: 'json',
    success: function (res) {
      console.log(res);
      let temp = '';

      res.forEach((elm) => {
        let picture = JSON.parse(elm.picture);

        // 让ajax请求到的数据结果中遍历后的id与cookie中数据的id 相同
        let current = shop.filter((val) => val.id == elm.id);

        temp += `  <div class="cart-item">
        <div class="p-checkbox">
          <input type="checkbox" class="ck" />
        </div>
        <div class="p-img">
          <img src="../${picture[0].src}" alt="" />
        </div>
        <div class="p-name">${elm.title}</div>
        <div class="p-price">${parseFloat(elm.price).toFixed(2)}元</div>
        <div class="p-num">
            <div class="change-goods-num">
                <a href="javascript:void(0)" class="decrement">-</a>
                <input type="text" class="itxt" value="${current[0].num}">
                <a href="javascript:void(0)" class="increment">+</a>
            </div>
      </div>
      <div class="p-sum">${(elm.price * current[0].num).toFixed(2)}元</div>
      <div class="p-action" data-id="${
        elm.id
      }"><a href="javascript:void(0)" data-id="${elm.id}">x</a></div>
    </div>
        `;
      });
      $('.cart-item-list')
        .append(temp)
        .find('.p-action')
        .on('click', function () {
          let res = shop.filter((el) => el.id != $(this).attr('data-id'));
          cookie.set('shop', JSON.stringify(res), 1);
          location.reload();
        });

      $('.checkAll').change(function () {

        $('.ck, .checkAll').prop('checked', $(this).prop('checked'));
        if ($(this).prop('checked')) {
          // 让所有的商品添加 check-cart-item 类名
          $('.cart-item').addClass('check-cart-item');
        } else {

          $('.cart-item').removeClass('check-cart-item');
        }
      });

      $('.ck').change(function () {
        if ($('.ck:checked').length === $('.ck').length) {
          $('.checkAll').prop('checked', true);
        } else {
          $('.checkAll').prop('checked', false);
        }
        if ($(this).prop('checked')) {
          $(this).parents('.cart-item').addClass('check-cart-item');
        } else {
          $(this).parents('.cart-item').removeClass('check-cart-item');
        }
      });

      $('.increment').click(function () {
        var n = $(this).siblings('.itxt').val();
        n++;
        $(this).siblings('.itxt').val(n);
        var p = $(this).parents('.p-num').siblings('.p-price').html();
        p = p.substr(0, p.length - 1);
        console.log(p);
        var price = (p * n).toFixed(2);
        $(this)
          .parents('.p-num')
          .siblings('.p-sum')
          .html(price + '元');
        getSum();
      });

      $('.decrement').click(function () {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings('.itxt').val();
        if (n == 1) {
          return false;
        }
        // console.log(n);
        n--;
        $(this).siblings('.itxt').val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents('.p-num').siblings('.p-price').html();
        // console.log(p);
        p = p.substr(0, p.length - 1);
        console.log(p);
        var price = (p * n).toFixed(2);
        // 小计模块
        $(this)
          .parents('.p-num')
          .siblings('.p-sum')
          .html(price + '元');
        getSum();
      });
      //  4. 用户修改文本框的值 计算 小计模块
      $('.itxt').change(function () {
        // 先得到文本框的里面的值 乘以 当前商品的单价
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents('.p-num').siblings('.p-price').html();
        // console.log(p);
        p = p.substr(0, p.length - 1);
        var price = (p * n).toFixed(2);
        $(this)
          .parents('.p-num')
          .siblings('.p-sum')
          .html(price + '元');
        getSum();
      });
      // 5. 计算总计和总额模块
      getSum();

      function getSum() {
        var count = 0; // 计算总件数
        var money = 0; // 计算总价钱
        $('.itxt').each(function (i, ele) {
          count += parseInt($(ele).val());
        });
        // console.log(count);
        // $('.amount-sum em').text(count);
        $('.p-sum').each(function (i, ele) {
          money += parseFloat(
            $(ele).text()
            // .substr(0, ele.length - 1)
          );
        });
        console.log(money);
        $('.totle em').text(money.toFixed(2));
      }
    },
    // getSum();
  });
  // getSum();
}
